<template>
  <wd-navbar custom-class="navbar-custom" :bordered="false" fixed placeholder safeAreaInsetTop>
    <template #left>
      <view class="text-[36rpx] font-bold text-[#003309]">强脑科技</view>
    </template>
  </wd-navbar>
  <!-- 轮播 -->
  <view class="swiper-wrapper w-full h-[520rpx] px-[20rpx] box-border bg-gradient-to-b from-[#B0ED90] to-[#3CEBBB] flex items-center justify-center">
    <swiper
      class="swiper-container"
      :current="current"
      :autoplay="false"
      :interval="3000"
      :duration="500"
      :circular="true"
      indicator-dots
      indicator-color="rgba(255, 255, 255, 0.5)"
      indicator-active-color="#fff"
      @change="handleSwiperChange"
    >
      <swiper-item v-for="(item, index) in swiperList" :key="index" @click="handleSwiperClick(index)">
        <image :src="item" mode="aspectFill" class="swiper-image"></image>
      </swiper-item>
    </swiper>
  </view>
  <!-- 下面的内容 -->
  <view class="w-full px-[20rpx] box-border p-b-[30rpx] box-border">
    <!-- 最新动态轮播 -->
    <wd-notice-bar 
      color="#303030" 
      background-color="#F1F1F1" 
      custom-class="notice-bar-custom"
      @click="handleNoticeBarClick"
    >
      <template #prefix>
        <image src="/src/static/images/laba.png" mode="scaleToFill" style="width: 48rpx;height: 44rpx;margin-right: 15rpx;"/>
        <text class="text-[#f00] text-[32rpx] relative top-[6rpx]">最新动态：</text>
      </template>
      <text class="text-[#000] text-[32rpx]">{{ latestData.title }}</text>
    </wd-notice-bar>
    <!-- 4个菜单 -->
    <view class="flex items-center justify-between flex-wrap">
      <view 
        class="menu-item position-relative flex items-center justify-between overflow-hidden"  
        v-for="(item, index) in menuList" 
        :key="index" 
        @click="handleMenuClick(item.url)"
      >
        <image 
          :src="item.bg" 
          class="absolute top-0 left-0 w-full h-full" 
          mode="aspectFill"
        />
        <view class="relative z-10">
          <text style="font-weight: 500;" class="text-[#003309] font-[800] text-[40rpx] text-shadow-[1px_0px_1px_rgba(0,0,0,0.3)] font-family-[SourceHanSansCN, SourceHanSansCN-Bold]">{{ item.title }}</text>
          <br>
          <text class="text-[#00AD2E] text-[24rpx] text-shadow-[1px_0px_1px_rgba(0,0,0,0.3)] font-family-[ArialMT]">{{ item.smallTitle }}</text>
        </view>
      </view>
    </view>
    <!-- 地图 -->
    <view class="location">
      <view class="map">
        <!-- #ifdef MP-WEIXIN -->
          <map 
            :key="markers[0].id" 
            :enable-scroll="false" 
            :enable-zoom="false" 
            :latitude="location.latitude"
            :longitude="location.longitude" 
            :markers="markers" 
            :scale="16"
            style="position: relative;width: 100%; height: 100%;border-radius: 20rpx;"
            @click="handleToMapLocation"
          ></map>
        <!-- #endif -->
        
        <!-- 右下角文字 -->
        <view class="map-footer">
          <view class="footer-text" @click="handleCenterClick">点击查看其他授权中心地址</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { latest } from '@/api/common.js'

defineOptions({
  name: 'Home',
})
definePage({
  type: 'home',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
})

const latestData = ref<any>({})


// 菜单数据
const menuList = ref<any[]>([
  {title: '新闻资讯', smallTitle: 'Journalism', bg: '../../static/images/bg3.png',url: '/pages-children/news/index'},
  {title: '展厅风采', smallTitle: 'Showroom', bg: '../../static/images/bg4.png',url: '/pages-children/showRoom/index'},
  {title: 'APP下载', smallTitle: 'Download', bg: '../../static/images/bg5.png',url: '/pages-children/appDownload/index'},
  {title: '产品展示', smallTitle: 'Product', bg: '../../static/images/bg6.png',url: '/pages-children/productListByProduct/index'},
])

onShow(() => {
  getLatestData()
})

// 获取最新公告(返回值是对象)
const getLatestData = async () => {
  const res = await latest()
  console.log('最新公告', res)
  latestData.value = res
}

const handleNoticeBarClick = () => {
  uni.navigateTo({
    url: '/pages-children/richText/index?title=最新动态&content=' + encodeURIComponent(latestData.value.content),
  })
}

// 轮播图数据
const current = ref<number>(0)
const swiperList = ref<string[]>([
  'https://jinjukeji.oss-cn-hangzhou.aliyuncs.com/cardoctor1762341820254.png',
])

// 轮播图点击事件
const handleSwiperClick = (index: number) => {
  console.log('轮播图点击', index, swiperList.value[index])
}

// 轮播图切换事件
const handleSwiperChange = (e: any) => {
  current.value = e.detail.current
  console.log('轮播图切换', e.detail.current)
}

// 菜单点击事件
const handleMenuClick = (url: string) => {
  uni.navigateTo({
    url: url,
  })
}

// 跳转地图
const handleToMapLocation = () => {
  uni.openLocation({
    latitude: location.latitude,
    longitude: location.longitude,
    name: location.name,
    address: location.address,
    success: result => {
      // uni.showToast({
      //   title: '打开地图成功',
      //   icon: 'success',
      // })
    },
    fail: error => {
      // uni.showToast({
      //   title: error?.message || '打开地图失败',
      //   icon: 'none',
      // })
    }
  });
}

// 百度地图经纬度转换为腾讯、高德地图经纬度
function bMapTransQQMap(lng: number, lat: number) {
  const x_pi = 3.14159265358979324 * 3000.0 / 180.0;
  const x = lng - 0.0065;
  const y = lat - 0.006;
  const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
  const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
  const lngs = z * Math.cos(theta);
  const lats = z * Math.sin(theta);
  
  return {
    lng: lngs,
    lat: lats
  }
}

// 授权中心信息数据（假数据）
const centerInfo = reactive({
  name: "BrainCo强脑科技湖北省代",
  address: "脑强科技湖北授权中心详细地址",
  longitude: 114.428929,  // 经度
  latitude: 30.479805     // 纬度
});

// 地图位置信息（转换后的坐标）
const location = reactive({
  latitude: computed(() => bMapTransQQMap(centerInfo.longitude, centerInfo.latitude).lat),
  longitude: computed(() => bMapTransQQMap(centerInfo.longitude, centerInfo.latitude).lng),
  name: computed(() => centerInfo.name),
  address: computed(() => centerInfo.address),
});

// 查看其他授权中心地址
const handleCenterClick = () => {
  uni.navigateTo({
    url: '/pages-children/centerAddress/index',
  })
}

// 地图标记点
const markers = reactive([
  {
    id: 0,
    latitude: location.latitude,
    longitude: location.longitude,
    width: 30,
    height: 30,
    callout: {
      content: computed(() => location.name),
      color: "#ffffff",
      fontSize: 12,
      borderRadius: 8,
      borderWidth: 0,
      borderColor: "#333333",
      bgColor: "#333333",
      padding: 10,
      textAlign: "center",
      display: "ALWAYS",
    },
  },
] as any);
</script>

<style>
page{
  background-color: #F1F1F1;
}
</style>

<style lang="scss" scoped>
.swiper-wrapper {
  .swiper-container {
    width: 710rpx;
    height: 480rpx;
    background: #FFFFFF;
    box-shadow: 2rpx 0rpx 4rpx 0rpx #000000;
    border-radius: 16rpx;
    overflow: hidden;
  }

  .swiper-image {
    width: 100%;
    height: 100%;
    border-radius: 12rpx;
  }
}
.notice-bar-custom {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.menu-item {
  width: 336rpx;
  height: 180rpx;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
  border-radius: 16rpx;
  padding: 20rpx;
  box-sizing: border-box;
  margin-bottom: 32rpx;
}

.location {
  border-radius: 20rpx;
  border: 1rpx solid #E0E0E0;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
  
  .map {
    width: 100%;
    height: 400rpx;
    border-radius: 20rpx;
    overflow: hidden;
    position: relative;
  }

  .map-footer {
    position: absolute;
    right: 0rpx;
    bottom: 0rpx;
    z-index: 999;
    background: rgba(255, 255, 255, 0.7);
    padding: 16rpx 24rpx;
    border-top: 1rpx solid #E0E0E0;
    border-left: 1rpx solid #E0E0E0;
    border-radius: 12rpx 0 12rpx 0;
    box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(0, 0, 0, 0.16); //阴影扩散大一些
    
    .footer-text {
      font-size: 24rpx;
      color: #333;
      font-weight: 500;
    }
  }
}
</style>
